<template>
  <border
    class="basic-information"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-content-left">
        <div class="octagon-list">
          <octagon
            v-for="(item, index) in octagonMessage.iconSrc"
            :key="index"
            :octagonImg="octagonMessage.octagonImg"
            :iconSrc="item"
            :octagonName="octagonMessage.octagonName[index]"
            :octagonNumber="octagonMessage.octagonNumber[index]"
            :octagonUnit="octagonMessage.octagonUnit[index]">
          </octagon>
        </div>
        <map-vue :organId="organId"
                 ref="map"
                 :isUse2D = "mapConfig.isUse2D"
                 :isMapMenu = "mapConfig.isMapMenu"
                 :isCallback = "mapConfig.isCallback"
                 :isPropsData="mapConfig.isPropsData"
                 :mapData="mapConfig.mapData"
                 :isNeedMapBackground="mapConfig.isNeedMapBackground"></map-vue>
      </div>
      <div class="module-content-right">
        <div class="module-content-right-top">
          <img src="./../../assets/images/module/background/octagon269x220.png" alt="">
          <div class="right-top-content">
            <div class="title">时点出租率</div>
            <single-ring ref="singleRing"
                         :singleData="singleRingConfig.singleData"
                         :radius="singleRingConfig.radius"
                         :colorIndex="singleRingConfig.colorIndex"></single-ring>
          </div>
        </div>
        <div class="pie-bottom">
          <div class="pie-title">
            <img class="pie-title-img" src="../../assets/images/module/pie-title-long.png"/>
            <p class="pie-title-message">租赁资源类型分布</p>
          </div>
          <Pie
            ref="pieBottom"
            class="pie-main pie-bottom-main"
            :pieData="pieBottom.data"
            :typeName="pieBottom.typeName"
            :dataName="pieBottom.dataName"
            :labelSize="pieBottom.labelSize"
            :labelLine="pieBottom.labelLine"
            :pieType="pieType"
            :seriesRadius="seriesRadius"></Pie>
          <div class="pie-legend">
            <div class="legend-li" v-for="(item, index) in pieBottomInformation" :key="index">
              <span class="legend-span" v-if="item.value != 0">
                <i></i>{{ item.name }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/Octagon.vue'
import MapVue from './../components/MapVue.vue'
import Pie from './../components/Pie.vue'
import SingleRing from './../components/SingleRing.vue'
export default {
  name: 'operationOverview',
  components: {
    Border,
    Octagon,
    MapVue,
    Pie,
    SingleRing
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x2',
        icon: require('./../../assets/images/icon/big-icon.png'),
        titleText: '运营概况',
        goPageUrl: ''
      },
      singleRingConfig: {
        singleData: '',
        colorIndex: 1,
        radius: ['60%', '80%']
      },
      pieBottom: {
        data: [],
        typeName: 'name',
        dataName: 'value',
        labelSize: 12,
        labelLine: {
          normal: {
            length: 10,
            length2: 10
          }
        },
        seriesRadius: [['10%', '40%'], ['5%', '10%'], ['45%', '46%'], ['52%', '53%'], ['59%', '60%']]
      },
      pieBottomInformation: [], // 项目业态
      mapConfig: {
        isMapMenu: false,
        isUse2D: true,
        isPropsData: true,
        isCallback: false,
        isNeedMapBackground: true,
        mapData: []
      },
      octagonMessage: {
        octagonImg: require('./../../assets/images/module/background/octagon250x100.png'),
        iconSrc: [require('./../../assets/images/module/icon/service-items.png'),
          require('./../../assets/images/module/icon/management-area.png'),
          require('./../../assets/images/module/icon/serving-customers.png'),
          require('./../../assets/images/module/icon/operational-resources.png'),
          require('./../../assets/images/module/icon/leviable-resources.png'),
          require('./../../assets/images/module/icon/rented-resources.png')],
        octagonName: ['服务项目', '管理面积', '服务客户', '可经营资源', '可租资源', '已租资源'],
        octagonNumber: ['', '', '', '', '', '', '', ''],
        octagonUnit: ['个', '万㎡', '户', '万㎡', '万㎡', '万㎡']
      },
      apiData: {}
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    pieType () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? '' : 'default'
    },
    seriesRadius () {
      return this.$store.state.themeConfig.echartsTheme === 'default' ? [['10%', '40%'], ['5%', '10%'], ['45%', '46%'], ['52%', '53%'], ['59%', '60%']] : [['35%', '50%']]
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取地图数据
    getMapData () {
      this.operationApi.businessBasicSummary({ organId: this.organId }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.apiData = res.data.data
          this.pieBottom.data = data.businessResourceDistributed
          this.pieBottomInformation = data.businessResourceDistributed
          this.singleRingConfig.singleData = data.rentalRate
          this.octagonMessage.octagonNumber = [data.communityNum, parseInt(data.managerArea),
            parseInt(data.customerNum), parseInt(data.businessResource / 10000),
            parseInt(data.leaseResource / 10000), parseInt(data.rentedOutResource / 10000)]
          this.mapConfig.mapData = data.provinceList
        } else {
          this.showTips('请求失败，点击确认继续刷新')
          this.singleRingConfig.singleData = 0
          this.octagonMessage.octagonNumber = [0, 0, 0, 0, 0]
          this.mapConfig.mapData = []
        }
      }, res => {
        this.showTips('请求失败，点击确认继续刷新')
        this.singleRingConfig.singleData = 0
        this.octagonMessage.octagonNumber = [0, 0, 0, 0, 0]
        this.mapConfig.mapData = []
      })
    },
    getData (type) {
      if (type === 'init') {
        // 获取地图数据apiData
        this.getMapData()
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      if (JSON.stringify(data) !== '{}') {
        this.pieBottom.data = data.businessResourceDistributed
        this.singleRingConfig.singleData = data.rentalRate
      }
    },
    resizeChart () {
      this.$refs.pieBottom.resizeChart()
      this.$refs.singleRing.resizeChart()
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>
<style lang="scss" scoped>
.basic-information{
  .module-content {
    width: calc(100% - 20px);
    height: calc(100% - 25px);
    padding: 10px 10px 0;
    .module-content-left {
      width: 68.95%;
      height: 100%;
      float: left;
      .octagon-list {
        width: 100%;
        // height: 32%;
        padding-left: 5%;
        box-sizing: border-box;
        overflow: hidden;
        .octagon {
          position: relative;
          overflow: hidden;
          width: 31%;
          float: left;
          margin: 0 2.2% 2.2% 0;
          // background: url(../../assets/images/module/octagon.png) no-repeat center;
          // background-size: 99% 100%;
          &:nth-of-type(3), &:nth-of-type(6) {
            margin: 0 0 2.2%;
          }
          &:nth-of-type(4), &:nth-of-type(5), &:nth-of-type(6) {
            margin: 0 2.2% 0 0;
          }
          & /deep/ .octagon-icon-img {
            width: 40px;
            height: auto;
            margin-left: 10px;
            margin-right: 10px;
          }
        }
      }
      .map {
        width: 100%;
        height: calc(70% - 10px);
        margin-top: 10px;
      }
    }
    .module-content-right {
      width: 30%;
      height: 100%;
      float: left;
      .module-content-right-top {
        width: 100%;
        height: 30%;
        position: relative;
        img {
          width: 75.3%;
        }
        .right-top-content {
          position: absolute;
          top: 0;
          left: 11.5%;
          width: 77%;
          height: 100%;
          .title {
            font-size: 14px;
            line-height: 42px;
            color: #72ACEC;
            padding-left: 20px;
            text-align: left;
          }
          .singleRing {
            width: 100%;
            height: calc(100% - 46px);
            /deep/ .chart {
              height: 100%;
            }
          }
        }
      }
      .pie-bottom {
        width: 100%;
        height: calc(60% - 10px);
        margin-top: 30%;
      }
      .pie-title {
        width: 100%;
        padding: 0 2%;
        position: relative;
        display: flex;
        align-items: center;
        .pie-title-img{
          width: 58%;
        }
        .pie-title-message{
          width: 34%;
          font-size: 12px;
          color: #b5cff4;
          text-align: center;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          white-space: nowrap;
          position: absolute;
          left: 12%;
          top: 0;
        }
      }
      .pie-main{
        width: 100%;
        height: 75%;
      }
      .pie-legend{
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
        font-size: 12px;
        color: #fff;
        .legend-li {
          &:nth-of-type(1){
            i{
              background: #e9e703;
            }
          }
          &:nth-of-type(2){
            i{
              background: #e8605e;
            }
          }
          &:nth-of-type(3){
            i{
              background: #19dc7c;
            }
          }
          &:nth-of-type(4){
            i{
              background: #319ced;
            }
          }
          &:nth-of-type(5){
            i{
              background: #fa9022;
            }
          }
          &:nth-of-type(6){
            i{
              background: #8c70f8;
            }
          }
          &:nth-of-type(7){
            i{
              background: #cadfea;
            }
          }
          &:nth-of-type(8){
            i{
              background: #f59233;
            }
          }
        }
        .legend-span{
          display: block;
          float: left;
          margin: 0 10px 5px 0;
          i{
            display: inline-block;
            width: 8px;
            height:8px;
            margin-right: 5px;
            border-radius: 100%;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1890px) {
  .basic-information {
    .module-content {
      .module-content-left {
        .octagon-list {
          .octagon {
            & /deep/ .octagon-icon-img {
              width: 48px;
            }
          }
        }
      }
    }
  }
}
</style>
